<template>
  <div class="editQa-box">
    <!-- 问题列表 -->
    <ul v-if="qaList.length">
        <li v-for="(qa,index) in qaList" :key="index">
            <div class="qa-title">
                <i class="el-icon-remove" @click="removeQuestion(index)"></i>
                <p>问题</p>
                <el-input type="textarea" :rows="2" resize="none" placeholder="请输入..." v-model="qa.question"></el-input>
            </div>
            <div class="qa-answer">
                <i class="el-icon-remove"></i>
                <p>回答</p>
                <el-input type="textarea" :rows="5" resize="none" placeholder="请输入..." v-model="qa.answer"></el-input>
            </div>
        </li>
    </ul>
    <!-- 无数据 -->
    <div class="noData-box" v-else>
        <img src="~@/assets/images/wjg_img@2x.png" alt="">
        <p>暂无数据</p>
    </div>

    <!-- 按钮 -->
    <SubBtn>
        <template slot="btn">
            <el-button round @click="addQuestion">添加问题</el-button>
            <el-button type="primary" round @click="saveBtn">保存</el-button>
        </template>
    </SubBtn>
  </div>
</template>

<script>
import SubBtn from "@/wss/components/subBtn.vue";
import {getProjectQaListApi,addListCoverProjectQaApi} from "@/wss/newApi_3-24/work/projectType.js";
export default {
    name: 'editQa',
    components:{SubBtn},
    props:{
        selectType:{
            type: Object
        },
        editQaDrawer:{
            type: Boolean
        }
    },
    data(){
        return{
            qaList:[],// 问题列表
        }
    },
    watch:{
        selectType(newVal,oldVal){
            this.qaList = [] //每次切换置空
            this.getProjectQaList()// 查询项目三级分类的问答
        }
    },
    mounted(){
        this.qaList = [] //每次切换置空
        this.getProjectQaList()// 查询项目三级分类的问答
    },
    methods:{
        // 查询项目三级分类的问答
        async getProjectQaList(){
            // id为空的时候不走查询
            if(!this.selectType.id) return
            let type_id = this.selectType.id
            let result = await getProjectQaListApi({type_id})
            if(result.code==200){
                this.qaList = result.rows
            }
        },

        // 添加一条问题
        addQuestion(){
            let data = {
                question: '', //问题
                answer: '',//回答
                typeId: this.selectType.id ? this.selectType.id : '',//三级id
            }
            this.qaList.push(data)
        },

        // 删除一个问题
        removeQuestion(index){
            // 至少保留一个问题
            if(this.qaList.length<2){
                this.$message({message: '至少保留一个问题',type: 'warning'});
                return
            }
            this.qaList.splice(index,1)
        },

        // 点击保存按钮
        saveBtn(){
            // 没有内容不继续走
            if(!this.qaList.length) return
            // 判断是否有没写的
            for (let i = 0; i < this.qaList.length; i++) {
                if(this.qaList[i].question=='' || this.qaList[i].answer==''){
                    this.$message({message: '请输入完整内容',type: 'warning'});
                    return
                }
            }
            // 没有id的时候要把这个问题列表传给前面，让前面去提交
            if(this.selectType.id){
                // 有id去发请求
                this.addListCoverProjectQa() //保存的接口
            }else{
                // 没有id传数据过去
                this.$bus.$emit('sendProjectQaList',this.qaList)
                // 关闭弹窗
                this.$emit('update:editQaDrawer',false)
            }
        },

        // 保存的接口
        async addListCoverProjectQa(){
            let result = await addListCoverProjectQaApi(this.qaList)
            if(result.code == 200){
                this.$message({message: '保存成功',type: 'success'});
                this.$emit('update:editQaDrawer',false)
            }
        },
    },
}
</script>

<style lang="scss">
ul,p{
    margin: 0;
    padding: 0;
    list-style: none;
}

.editQa-box{
    padding: 0 20px;
    padding-bottom: 50px;
    li{
        padding-bottom: 20px;
        margin-bottom: 20px;
        border-bottom: 1px solid #EBEEF5;
        // 问题
        .qa-title{
            display: flex;
        }
        i{
            color: #909AAA;
            font-size: 14px;
            margin-right: 14px;
            margin-top: 5px;
            cursor: pointer;
        }
        p{
            width: 36px;
            font-size: 14px;
            margin-right: 10px;
            color: #2E3F5E;
            margin-top: 2px;
        }
        .el-textarea__inner{
            color: #2E3F5E;
            font-family: Microsoft Yahei;
        }
        // 回答
        .qa-answer{
            display: flex;
            margin-top: 10px;
            i{
            visibility: hidden; 
            }
        }
    }
}

// 无数据
.noData-box{
    text-align: center;
    margin-top: 50px;
    img{
        width: 40%;
    }
    p{
        font-size: 12px;
        font-weight: 400;
        color: #858A91;
        margin-top: 30px;
    }
}
</style>